<template>
  <div class="person-count">
    <div class="item-box" v-for="(item, index) in items" :key="index">
      <img class="img" :src="require(`../../../assets/img/${item.img}.png`)" alt="">
      <div class="person-count-right">
        <div class="person-count-title">{{item.title}}</div>
        <div class="person-count-num">{{item.num}} 人</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PersonCount',
  data () {
    return {
      items: [
        { img: 'xianeirenkoushu', title: '辖内人口数量', num: 136457 },
        { img: 'gaunpianrenkoushu', title: '管片人口数量', num: 23457 },
        { img: 'cunkuanzhanghushu', title: '存款账户数', num: 6457 },
        { img: 'zhongjianyewushu', title: '中间业务客户数', num: 1365 }
      ]
    }
  }
}
</script>
<style lang="less">
  .person-count {
    .item-box {
      display: flex;
      align-items: center;
      padding-top: 40px;
      padding-left: 40px;
    }
    .img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }
    .person-count-title {
      color: #FFD640;
    }
    .person-count-num {
      font-size: 24px;
    }
  }
</style>
